<!--
 * @Description: 首页组件
 * @Author: ceam
 * @02-07 16:23:00
 * @LastEditors: ceam
 * @LastEditTime: 02-27 13:36:12
 -->
<template>
  <div class="home" id="home" name="home">
    <!-- 轮播图 -->
    <div class="block">
      <el-carousel height="460px">
        <el-carousel-item v-for="(item, index) in bannerList">
          <img style="width: 100%; height:460px;" :src="baseApi + '/recruit/' + item.img"/>
        </el-carousel-item>
        <!--  <el-carousel-item >
           <img style="height:460px;" src="@/assets/images/j1.jpg"/>
         </el-carousel-item>
         <el-carousel-item >
           <img style="height:460px;" src="@/assets/images/j2.jpg"/>
         </el-carousel-item>
         <el-carousel-item >
           <img style="height:460px;" src="@/assets/images/j3.jpg"/>
         </el-carousel-item> -->
       </el-carousel>
     </div>
     <!-- 轮播图END -->
  </div>
</template>
<script>

  //import rrOperation from '@crud/RR.operation'
  import {getAll} from '../api/ceamSwiper'
  import { mapGetters } from 'vuex'

  export default {

    data() {
      return {
        bannerList: [],
        carousel: "", // 轮播图数据
        phoneList: "", // 手机商品列表
        miTvList: "", // 小米电视商品列表
        // applianceList: "", // 家电商品列表
        // applianceHotList: "", //热门家电商品列表
        accessoryList: "", //配件商品列表
        accessoryHotList: "", //热门配件商品列表
        protectingShellList: "", // 保护套商品列表
        chargerList: "", //充电器商品列表
        applianceActive: 1, // 家电当前选中的商品分类
        accessoryActive: 1 // 配件当前选中的商品分类
      };
    },
    watch: {
      // // 家电当前选中的商品分类，响应不同的商品数据
      // applianceActive: function(val) {
      //   // 页面初始化的时候把applianceHotList(热门家电商品列表)直接赋值给applianceList(家电商品列表)
      //   // 所以在切换商品列表时判断applianceHotList是否为空,为空则是第一次切换,把applianceList赋值给applianceHotList
      //   if (this.applianceHotList == "") {
      //     this.applianceHotList = this.applianceList;
      //   }
      //   if (val == 1) {
      //     // 1为热门商品
      //     this.applianceList = this.applianceHotList;
      //     return;
      //   }
      //   if (val == 2) {
      //     // 2为电视商品
      //     this.applianceList = this.miTvList;
      //     return;
      //   }
      // },
      accessoryActive: function(val) {
        // 页面初始化的时候把accessoryHotList(热门配件商品列表)直接赋值给accessoryList(配件商品列表)
        // 所以在切换商品列表时判断accessoryHotList是否为空,为空则是第一次切换,把accessoryList赋值给accessoryHotList
        if (this.accessoryHotList == "") {
          this.accessoryHotList = this.accessoryList;
        }
        if (val == 1) {
          // 1为热门商品
          this.accessoryList = this.accessoryHotList;
          return;
        }
        if (val == 2) {
          // 2为保护套商品
          this.accessoryList = this.protectingShellList;
          return;
        }
        if (val == 3) {
          //3 为充电器商品
          this.accessoryList = this.chargerList;
          return;
        }
      }
    },
    computed: {
      ...mapGetters([
        'baseApi'
      ])
    },
    created() {
      this.listSwiper();
      // 获取轮播图数据
      this.$axios
        .get("/api/resources/carousel", {})
        .then(res => {
          this.carousel = res.data.data;
        })
        .catch(err => {
          return Promise.reject(err);
        });
      // 获取各类商品数据
      this.getPromo(1, "phoneList");
      this.getPromo(2, "miTvList");
      this.getPromo(5, "protectingShellList");
      this.getPromo(7, "chargerList");
      // this.getHot(
      //   "applianceList"
      // );
      this.getHot(
        "accessoryList"
      );
    },
    methods: {
      listSwiper() {
        const params = {
          page: 0,
          size: 10
        }
        getAll(params).then(res => {
          this.bannerList = res.records;
        })
      },
      // 获取家电模块子组件传过来的数据
      // getChildMsg(val) {
      //   this.applianceActive = val;
      // },
      // 获取配件模块子组件传过来的数据
      getChildMsg2(val) {
        this.accessoryActive = val;
      },
      // 获取各类商品数据方法封装
      getPromo(categoryId, val) {
        let api = "/api/product/category/limit/" + categoryId;
        this.$axios
          .get(api)
          .then(res => {
            this[val] = res.data.data;
          })
          .catch(err => {
            return Promise.reject(err);
          });
      },
      getHot(val) {
        let api = "/api/product/category/hot";
        this.$axios
          .get(api)
          .then(res => {
            this[val] = res.data.data;
          })
          .catch(err => {
            return Promise.reject(err);
          });
      }
    }
  };
</script>
<style scoped>
  @import "../assets/css/index.css";
</style>
